<template>
  <div class="lo-re-panel">
    <div class="lo-re-title">
      <h3 class="panel-title">账号登录</h3>
      <div class="panel-text">
        <span>没有账号?</span>
        <span class="register-text" @click="toRegister">点击注册</span>
      </div>
    </div>
    <el-form
  ref="loginFormRef"
  :model="user"
  :rules="rules"
  label-width="auto"
  require-asterisk-position="right"
  class="lo-re-input"
>
  <el-form-item prop="username" label="用户名" size="large">
    <el-input
      v-model="user.username"
      placeholder="请输入用户名"
    ></el-input>
  </el-form-item>
  <el-form-item prop="password" label="密码" size="large">
    <el-input
      v-model="user.password"
      placeholder="请输入密码"
      show-password
    ></el-input>
  </el-form-item> <el-form-item prop="password" label="密码" size="large">
<!--      图片验证码-->
     <div style="display: flex">
       <div>
         <el-input
             v-model="user.password"
             placeholder="请输入验证码"
             show-password
         ></el-input>
       </div>
       <div>

         <el-image :src="imageSrc" @click="getImage"></el-image>
       </div>
     </div>
  </el-form-item>
</el-form>
    <div class="lo-re-button">
      <el-button type="primary" @click="submit">确定</el-button>
      <div class="lo-re-button-text">
        <p>验证码登录</p>
        <p>忘记密码?</p>
      </div>
    </div>
    <div class="lo-re-footer">
      <p>其他登录方式</p>
      <div class="social-icons">
        <img src="../assets/weix.png" alt="微信" />
        <img src="../assets/weibo.png" alt="微博" />
        <img src="../assets/douyin.png" alt="抖音" />
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref, toRaw, watch} from "vue";
import request from '@/utils/requests'
import { ElMessage } from "element-plus";
import router from "@/router";
import axios from "axios";
const loginFormRef = ref(null);
const emit = defineEmits(['toRegister'])
const rules = ref({
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});

const user = ref({
  username: null,
  password: null,
});

const submit = () => {
  loginFormRef.value.validate(valid => {
    if (valid) {
      request.post('/login',user.value).then(res =>{
        console.log(res);
        
        if(!res.data.length){
          ElMessage.error("用户名或密码错误")
          user.value.username = null
          user.value.password = null
        }else{
          router.back()
          ElMessage.success("登录成功")
        }
        
      })
    }
  });
};
const toRegister = ()=>{
  emit('isShow', {message:true})
}
const imageSrc=ref('')
const getImage = () =>{
    request.get('/dev-api/api/v1/auth/captcha').then(res =>{
      console.log( '请求返回数据:',res)
      imageSrc.value = res.data.captchaBase64;
    })
}

  // axios({
  //   method: 'get',
  //   url: 'https://api.youlai.tech/dev-api/api/v1/auth/captcha',
  //   headers: { "Content-Type": "application/json;charset=utf-8" },
  //   data: {
  //   }
  // }).then(res =>{
  //   console.log( '请求返回数据:',res)
  //   imageSrc.value = res.data
  // });

onMounted(()=>{
  getImage()
})
</script>

<style scoped>
.lo-re-panel {
  background-color: rgba(255, 255, 255, 0.8);
  width: 90%;
  max-width: 400px;
  min-width: 300px;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}

.panel-title {
  color: #40485b;
  margin: 0;
  font-size: 1.5rem;
}

.lo-re-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.panel-text {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  color: #666;
}

.register-text {
  color: #409eff;
  margin-left: 8px;
  cursor: pointer;
}

.register-text:hover {
  text-decoration: underline;
}

.lo-re-input {
  margin-bottom: 20px;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-input {
  width: 100%;
}

.el-button {
  width: 100%;
  margin-bottom: 16px;
  height: 40px;
}

.lo-re-button-text {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 0.875rem;
  color: #666;
}

.lo-re-button-text p {
  margin: 0;
  cursor: pointer;
}

.lo-re-button-text p:hover {
  color: #409eff;
}

.lo-re-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  color: #999;
  font-size: 0.875rem;
}

.social-icons {
  display: flex;
  justify-content: center;
  margin-top: 12px;
  gap: 16px;
}

.social-icons img {
  width: 25px;
  height: 25px;
  cursor: pointer;
  transition: transform 0.2s;
}

.social-icons img:hover {
  transform: scale(1.1);
}
.el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}
/* 响应式调整 */
@media (max-width: 480px) {
  .lo-re-panel {
    width: 95%;
    padding: 16px;
  border-radius: 8px;
  }
  
  .panel-title {
    font-size: 1.3rem;
  }
  
  .lo-re-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .panel-text {
    width: 100%;
    justify-content: flex-end;
  }
}
</style>